<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="renderer" content="webkit">
    <title>橡皮筋应用</title>
    <style>
        body {
            background: rgba(100,145,250,0.3);
        }
        #canvas {
            margin-left: 20px;
            margin-right: 0;
            margin-bottom: 20px;
            border:thin solid #aaaaaa;
            cursor: crosshair;
            padding: 0;
        }

        #controls {
            margin: 20px 0 20px 20px;
        }

        #rubberbandDiv {
            position: absolute;
            border: 3px solid blue;
            cursor: crosshair;
            display: none;
        }
    </style>
</head>
<body>
    <div id="controls">
        <input type="button" id="resetButton" value="Reset"/>
    </div>

    <div id="rubberbandDiv"></div>

    <canvas id="canvas" width="800" height="520">
        Canvas not supported
    </canvas>

    <script>
        var canvas = document.getElementById('canvas'),
                context = canvas.getContext('2d'),
                rubberbandDiv = document.getElementById('rubberbandDiv'),
                resetButton = document.getElementById('resetButton'),
                image = new Image(),
                mousedown = {},
                rubberbandRectangle = {},
                dragging = false;

        function rubberbandStart(x,y){
            mousedown.x = x;
            mousedown.y = y;
            console.log('开始');
            rubberbandRectangle.left = mousedown.x;
            rubberbandRectangle.top = mousedown.y
            moveRubberbandDiv();
            showRubberbandDiv();

            dragging = true;
        }

        function rubberbandStretch(x,y){
            rubberbandRectangle.left = x < mousedown.x ? x :mousedown.x;
            rubberbandRectangle.top = y < mousedown.y ? y : mousedown.y;

            moveRubberbandDiv();

            resizeRubberbandDiv();
        }

        function rubberbandEnd() {
            var bbox = canvas.getBoundingClientRect();

            try {
                context.drawImage(canvas,
                                  rubberbandRectangle.left -bbox.left,
                                  rubberbandRectangle.top -bbox.top,
                                  rubberbandRectangle.width,
                                  rubberbandRectangle.height,
                                  0,0,canvas.width,canvas.height);

            }catch (e){

            }

            resetRubberbandRectangle();

            rubberbandDiv.style.width = 0;
            rubberbandDiv.style.height = 0;

            hideRibberbandDiv();

            dragging = false;
        }

        function moveRubberbandDiv(){
            rubberbandDiv.style.top = rubberbandRectangle.top + 'px';
            rubberbandDiv.style.left = rubberbandRectangle.left + 'px';
        }

        function resizeRubberbandDiv(){
            rubberbandDiv.style.width = rubberbandRectangle.width + 'px';
            rubberbandDiv.style.height = rubberbandRectangle.height + 'px';
        }

        function showRubberbandDiv(){
            rubberbandDiv.style.display ='inline';
        }

        function hideRibberbandDiv(){
            rubberbandDiv.style.display = 'none';
        }

        function resetRubberbandRectangle(){
            rubberbandRectangle = { top: 0, left:0, width: 0, height:0};
        }

        canvas.onmousedown = function (e) {
            var x = e.clientX,
                    y= e.clientY;
            console.log('鼠标按下');
            e.preventDefault();
            rubberbandStart(x,y);
        };

        window.onmousemove = function(e){
            var x = e.clientX,
                y = e.clientY;
            console.log('鼠标移动');
            e.preventDefault();
            if(dragging){
                console.log('正在拖动');
                rubberbandStretch(x,y);
            }
        };

        window.onmouseup = function(e){
            e.preventDefault();
            rubberbandEnd();
        };

        image.onload = function(){
            context.drawImage(image,0,0,canvas.width,canvas.height);
        };

        resetButton.onclick= function(e){
            context.clearRect(0,0,context.canvas.width,context.canvas.height);
            context.drawImage(image,0,0,canvas.width,canvas.height);
        };

        image.src = 'aaa.jpg';

    </script>
</body>
</html>